<template>
	<view>
		<commonHeader :title="$t('p1')"></commonHeader>
		<view class="gHeadbox"></view>
		<view class="pwdBox">
			<view class="pwdBox_from">
				<u-form :model="model1" :rules="rules" ref="uForm">
					<u-form-item class="from_item" prop="userInfo.pws">
						<u-input color="#ffffff" type="password" v-model="model1.userInfo.pws" border="none"
							:placeholder="$t('p2')">
							<template #prefix>
								<image class="llanber" src="@/static/img/pws.png" mode=""></image>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item class="from_item" prop="userInfo.fpws">
						<u-input color="#ffffff" type="password" v-model="model1.userInfo.fpws" border="none"
							:placeholder="$t('p2')">
							<template #prefix>
								<image class="llanber" src="@/static/img/pwsk.png" mode=""></image>
							</template>
						</u-input>
					</u-form-item>
					<u-form-item class="from_item" prop="userInfo.iniv">
						<u-input color="#ffffff" type="text" v-model="model1.userInfo.iniv" border="none"
							:placeholder="$t('p4')">
							<template #prefix>
								<image class="llanber" src="@/static/img/pwp.png" mode=""></image>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="pwdBox_qvbox d_f_between">
				<view :class="typeActive==1?'item hidden-text item_active':'item hidden-text'" @click="typeActive=1">
					{{$t('p5')}}
				</view>
				<view :class="typeActive==2?'item hidden-text item_active':'item hidden-text'" @click="typeActive=2">
					{{$t('p6')}}
				</view>
				<view :class="typeActive==3?'item hidden-text item_active':'item hidden-text'" @click="typeActive=3">
					{{$t('p7')}}
				</view>
			</view>
			<view class="pwdBox_pinfos">
				<!-- <image src="@/static/img/pwd.png" mode=""></image> -->
				<view :class="typeCher?'check':'check checks'" @click="typeCher = !typeCher">

				</view>
				<view class="">
					<view>{{$t('p8')}}</view>
					<view>{{$t('p9')}}</view>
					<view>{{$t('p10')}}</view>
				</view>
			</view>

			<view class="pwdBox_btn" @click="fnsubmit">
				{{$t('p11')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bbind //绑定上级
	} from '@/api/home.js'
	export default {
		data() {
			return {
				typeActive: 1,
				showSex: false,
				model1: {
					userInfo: {
						pws: '',
						fpws: '',
						iniv: '',
					},
				},
				rules: {
					'userInfo.pws': [{
						required: true,
						message: this.$t('p12'),
						trigger: 'blur'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return value.length >= 6
						},
						message: this.$t('p13'),
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					'userInfo.fpws': [{
						required: true,
						message: this.$t('p14'),
						trigger: 'blur'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							// return uni.$u.test.mobile(value);
							return this.model1.userInfo.pws == value
						},
						message: this.$t('p15'),
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					'userInfo.iniv': {
						required: true,
						message: this.$t('p16'),
						trigger: 'blur'
					},
				},
				typeCher: false,
				opcode: 1,
			};
		},
		mounted() {
			// this.fnbind() // 绑定上级
		},
		methods: {
			// 绑定上级
			fnbind() {
				var params = {
					address: this.$store.state.devAddress,
					inviteCode: this.model1.userInfo.iniv,
					area: this.typeActive,
					password: this.model1.userInfo.pws,
				}
				bbind(params).then(res => {
					console.log(res)
					if (res.code == 200) {

						uni.showToast({
							icon: 'none',
							title: this.$t('at14')
						})
						setTimeout(() => {
							console.log('888')
							if (this.opcode == 1) {

								// 返回上一页并发送事件通知
								uni.navigateBack({
									delta: 1, // 返回的页面数，如果需要返回上一页，delta 设为 1
									success: function() {
										// 通过 eventChannel 向上一页发送事件
										let pages = getCurrentPages();
										let prevPage = pages[pages.length - 2];
										prevPage.$vm.triggerRefresh();
									}
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						}, 2000)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 登录
			fnsubmit() {
				this.$refs.uForm.validate().then(res => {
					if (!this.typeCher) {
						// 同意服务及隐私条款
						uni.showToast({
							icon: 'none',
							title: this.$t('p17'), //标题
							duration: 2000 //显示时间
						})

					} else {
						this.fnbind()
					}
				}).catch(err => {
					console.log('验证失败：', err);
				});
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option); //打印出上个页面传递的参数。
			if (option.code) {
				this.model1.userInfo.iniv = option.code;
				this.opcode = 2
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	.pwdBox {
		padding: 30rpx;
		box-sizing: border-box;

		&_from {
			margin-top: 120rpx;

			.from_item {
				width: 100%;
				// height: 110rpx;
				border-radius: 55rpx;
				opacity: 1;
				background: #55007b54;
				margin-bottom: 42rpx;
				position: relative;
				padding: 0rpx 50rpx;
				box-sizing: border-box;

				&::before {
					/* 1 */
					display: block;
					content: '';
					border-radius: 55rpx;
					border: 2rpx solid transparent;
					background: linear-gradient(137deg, #9f7bff75 0%, #ffffff 100%) border-box;
					/* 2 */
					-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
					/* 3 */
					-webkit-mask-composite: xor;
					/* 4 */
					mask-composite: exclude;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.llanber {
					width: 22rpx;
					height: 28rpx;
					margin-right: 40rpx;
				}

				.u-input {

					font-size: 28rpx;
					color: #ffffff;
				}

				input {
					font-size: 28rpx;
					color: #ffffff;

					::placeholder {
						color: #b6b6b6;
						font-size: 28rpx;
					}
				}
			}
		}

		&_qvbox {
			margin-bottom: 60rpx;

			.item {
				margin: 0 12rpx;
				flex: 1;
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				border-radius: 22rpx;
				background: #ca00ff1c;
				opacity: 1;
				color: #ffffff;
				font-size: 38rpx;
				font-weight: 700;
			}

			.item_active {

				background: linear-gradient(137deg, #65008275 0%, #ca00ff73 97%, #cc00ff00 100%);
				box-shadow: 0 6rpx 24rpx 0 #ffe8904a;
			}
		}

		&_pinfos {
			display: flex;
			align-items: flex-start;
			color: #eccdff;
			font-size: 24rpx;
			line-height: 40rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
				margin-left: 50rpx;
			}

			.check {
				display: inline-block;
				position: relative;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				background: linear-gradient(-16.5deg, #f1b8ff 0%, #e474ff 100%);
				margin-right: 10rpx;
				margin-top: 6rpx;
			}

			.checks {
				background: #aaaaac;
			}

			.check::before,
			.check::after {
				content: '';
				pointer-events: none;
				position: absolute;
				color: white;
				border: 1px solid;
				background-color: white;
			}

			.check::before {
				width: 1px;
				height: 1px;
				left: 25%;
				top: 50%;
				transform: skew(0deg, 50deg);
			}

			.check::after {
				width: 3px;
				height: 1px;
				left: 45%;
				top: 42%;
				transform: skew(0deg, -50deg);
			}
		}

		&_btn {
			background: url("@/static/img/w.png") no-repeat;
			background-size: contain;
			width: 572rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			color: #ffffff;
			font-size: 42rpx;
			font-weight: 500;
			margin: 180rpx auto;
		}
	}
</style>